﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - My Account</title>

    <meta name="author" content="CreativeLayers">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

    <link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->


    <div th:insert="~{header ::#header}"></div>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="/page/index" title="">首页</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-item">
                            <a href="/page/shop" title="">商店</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a href="/page/loginOrRegister" title="">用户</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="flat-account background">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-login">
                        <div class="title">
                            <h3>登录</h3>
                        </div>
                        <form onsubmit="return false" id="form-login" accept-charset="utf-8">
                            <div class="form-box">
                                <label for="name-login">请输入您的邮箱进行登录：</label>
                                <input type="text" id="name-login" value="18888888888@163.com" name="email"
                                       placeholder="例：16532154852@163.com">
                            </div><!-- /.form-box -->
                            <div class="form-box">
                                <label for="password-login">请输入您的密码： </label>
                                <input type="password" id="password-login" value="123456    " name="password" placeholder="******">
                            </div><!-- /.form-box -->
                            <div class="form-box checkbox">
                                <button type="button" onclick="login()" class="login">登录</button>
                            </div><!-- /.form-box -->
                            <div class="form-box">

                                <a href="#" title="" style="float: right;">忘记密码?</a>
                            </div><!-- /.form-box -->
                        </form><!-- /#form-login -->
                    </div><!-- /.form-login -->
                </div><!-- /.col-md-6 -->
                <div class="col-md-6">
                    <div class="form-register">
                        <div class="title">
                            <h3>注册</h3>
                        </div>
                        <form onsubmit="return false" id="form-register" accept-charset="utf-8">
                            <div class="form-box">
                                <label for="name-register">请输入您的邮箱： </label>
                                <input type="text" id="name-register" name="name-register">
                                <span id="error"></span>
                            </div><!-- /.form-box -->
                            <div class="form-box">
                                <label for="password-register">请输入您的密码：</label>
                                <input type="password" id="password-register" name="password-register">
                                <span id="success" style="display: none;"></span>
                            </div><!-- /.form-box -->
                            <div class="form-box">
                                <button type="submit" onclick="register()" class="register">注册</button>
                            </div><!-- /.form-box -->
                        </form><!-- /#form-register -->
                    </div><!-- /.form-register -->
                </div><!-- /.col-md-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-account -->

    <section class="flat-row flat-iconbox style1 background">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="iconbox style1 v1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Worldwide Shipping</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-6 col-lg-3 -->
                <div class="col-md-6 col-lg-3">
                    <div class="iconbox style1 v1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Order Online Service</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-6 col-lg-3 -->
                <div class="col-md-6 col-lg-3">
                    <div class="iconbox style1 v1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Payment</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-6 col-lg-3 -->
                <div class="col-md-6 col-lg-3">
                    <div class="iconbox style1 v1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Return 30 Days</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-6 col-lg-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-iconbox -->

    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <div th:insert="~{footer :: #footer}"></div>

    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright"> All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->

</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>
</body>
</html>
<script type="text/javascript">
    // 用户注册功能
    function register() {
        var email = $("#name-register").val();
        var password = $("#password-register").val();
        $.ajax({
            url:'/user/register',
            dataType:'JSON',
            type:'POST',
            data:{email:email, password:password},
            success:function (result) {
                console.log(result);
                if (result.code == 200) {
                    $("#success").html(result.msg).show();
                    return;
                } else {
                    $("#error").html(result.msg).show();
                }
            }
        })
    }
    function login() {
        $.ajax({
            url:'/user/login',
            type:'POST',
            dataType:'JSON',
            data:$("#form-login").serialize(),
            success:function (result) {
                if (result.code ==200) {
                    window.location.href = result.data;
                } else {
                    alert("账户名或者密码错误");
                    return ;
                }
            }
        })
    }

</script>